<template>
<div class="order_list_view" v-loading="loading">
    <div class="page_container_view">
        <div class="page_header_view">
            <div class="page_header_left">
                <div class="page_header_left_item">
                    <span class="prefix_text">订单编号:</span>
                    <el-input v-model="orderNo" size="small" placeholder="请输入订单编号" clearable @input="searchData" style="width:160px" />
                </div>
                <div class="page_header_left_item">
                    <span class="prefix_text">服务类型:</span>
                    <el-select v-model="serverTypeId" placeholder="服务类型" clearable size="small" @change="searchData" style="width:90px">
                        <el-option label="全部" value="" />
                        <el-option v-for="item in serverTypes" :value="item.id" :label="item.name" :key="item.id" />
                    </el-select>
                </div>
                <div class="page_header_left_item">
                    <span class="prefix_text">联系电话:</span>
                    <el-input v-model="contactMobile" placeholder="联系电话" clearable size="small" @input="searchData" style="width:130px" />
                </div>
                <div class="page_header_left_item">
                    <span class="prefix_text">订单时效:</span>
                    <el-select v-model="isOverdue" placeholder="订单失效" clearable size="small" @change="searchData" style="width:110px">
                        <el-option v-for="item in isOverdueOptions" :value="item.value" :label="item.label" :key="item.value" />
                    </el-select>
                </div>
                <!-- <div class="page_header_left_item">
                    <span class="prefix_text">服务状态:</span>
                    <el-input v-model="serverState" placeholder="服务状态" clearable size="small" @input="searchData" style="width:100px" />
                </div> -->
                <div class="page_header_left_item">
                    <span class="prefix_text">订单状态:</span>
                    <!-- <el-select v-model="orderStatus" placeholder="订单状态" multiple collapse-tags clearable size="small" @change="searchData" style="width:150px">
                        <el-option v-for="item in orderStatusOptions" :value="item.state" :label="item.name" :key="item.state" />
                    </el-select> -->
                    <select-all v-model="orderStatus" :data="orderStatusOptions" @allSelectChange="searchData" :option="{label:'name',value:'state'}" inputWidth="150"></select-all>
                </div>
                <div class="page_header_left_item">
                    <span class="prefix_text">时间:</span>
                    <el-date-picker type="daterange" v-model="time" size="small" value-format="yyyy-MM-dd" format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable style="width:240px" @change="searchData">
                    </el-date-picker>
                </div>
                <div class="page_header_left_item">
                    <el-button type="primary" icon="el-icon-search" size="small" @click="searchData">搜索</el-button>
                </div>
                <div class="page_header_left_item">
                    <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
                </div>
            </div>

        </div>

        <div class="page_content_view">
            <el-tabs v-model="type" @tab-click="searchData" stretch style="padding-left:15px;width:1000px">
                <el-tab-pane :label="item.label" :name="item.name" v-for="item in tabOptions" :key="item.name">
                </el-tab-pane>
            </el-tabs>

            <div class="table_cotainer">
                <el-table v-if="tableData.length>0" ref="table_view" class="table_view" border stripe :data="tableData" :max-height="tableHeight" :style="{border: '1px solid '+global.tableBorderColor}" :header-cell-style="{
                            background: global.tableHeaderBackground,
                            borderColor: global.tableBorderColor,
                            padding: global.tablePadding,
                            height: global.tableHeaderHeight,
                            color: global.textColor,
                            fontSize:global.fontSize,
                            }" :cell-style="{
                            borderColor: global.tableBorderColor,
                            padding: global.tablePadding,
                            height: global.tableCellHeight,
                            color: global.textColor,
                            fontSize:global.fontSize,
                            }">
                    <!-- <el-table-column :fixed="true" type="selection" width="50" align="center"></el-table-column> -->
                    <el-table-column :fixed="true" type="index" label="序号" width="60" align="center" :index="tableIndex" v-if="tableHeader.length>0"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip :label="item.label" :prop="item.prop" :min-width="item.minWidth" v-for="item in tableHeader" :key="item.prop">
                        <template slot-scope="scope">
                            <template v-if="item.prop=='showStatusName'">
                                <el-tag v-if="scope.row.showStatusState=='order-1'||scope.row.showStatusState=='server-4'|| scope.row.showStatusState=='server-10'|| scope.row.showStatusState=='server-14'" type="warning" effect="dark">{{helper.showValue(scope.row[item.prop])}}</el-tag>
                                <el-tag v-else-if="scope.row.showStatusState=='server-10'|| scope.row.showStatusState=='server-15'" type="danger" effect="dark">{{helper.showValue(scope.row[item.prop])}}</el-tag>
                                <el-tag v-else-if="scope.row.showStatusState=='order-12'" type="success" effect="dark">{{helper.showValue(scope.row[item.prop])}}</el-tag>
                                <el-tag v-else-if="scope.row.showStatusState=='order-8'" type="info" effect="dark">{{helper.showValue(scope.row[item.prop])}}</el-tag>
                                <el-tag v-else effect="dark">{{helper.showValue(scope.row[item.prop])}}</el-tag>
                            </template>

                            <span v-else>{{helper.showValue(scope.row[item.prop])}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="260" align="center" v-if="tableHeader.length>0">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" @click="viewDetail(scope.row)" v-hasPermi="['vanger:order:query']">查看详情</el-button>
                            <el-button v-if="scope.row.showStatusState=='server-1'" size="mini" type="text" @click="assignOrder(scope.row)">订单指派</el-button>
                            <el-button v-if="scope.row.showStatusState=='server-2'" size="mini" type="text" @click="cancelOrder(scope.row)">取消订单</el-button>
                            <el-button v-if="scope.row.showStatusState=='server-3'" size="mini" type="text" @click="checkOrder(scope.row)">抢单审核</el-button>
                            <el-button v-if="scope.row.showStatusState=='server-4'" size="mini" type="text" @click="reassignOrder(scope.row)">重新指派</el-button>
                            <el-button v-if="scope.row.showStatusState=='server-5'" size="mini" type="text" @click="setOut(scope.row)">立即出发</el-button>
                            <el-button v-if="scope.row.showStatusState=='server-6'" size="mini" type="text" @click="reach(scope.row)">确认到达</el-button>
                            <el-button v-if="scope.row.showStatusState=='server-7'" size="mini" type="text" @click="serviceAnalysis(scope.row)">服务分析</el-button>
                            <el-button v-if="scope.row.showStatusState=='server-8'||scope.row.showStatusState=='server-10'" size="mini" type="text" @click="revokeOrder(scope.row)">撤单放弃</el-button>
                            <el-button v-if="scope.row.showStatusState=='server-8'" size="mini" type="text" @click="adjustAmount(scope.row)">调整金额</el-button>
                            <el-button v-if="scope.row.showStatusState=='server-8'" size="mini" type="text" @click="startServe(scope.row)">开始服务</el-button>
                            <el-button v-if="scope.row.showStatusState=='server-9'" size="mini" type="text" @click="holdOrder(scope.row)">挂单</el-button>
                            <el-button v-if="scope.row.showStatusState=='server-9'" size="mini" type="text" @click="applyPart(scope.row)">申请配件</el-button>
                            <el-button v-if="scope.row.showStatusState=='server-9'" size="mini" type="text" @click="endService(scope.row)">服务完成</el-button>
                            <el-button v-if="scope.row.showStatusState=='server-10'" size="mini" type="text" @click="continueService(scope.row)">继续服务</el-button>
                            <el-button v-if="scope.row.showStatusState=='server-14'" size="mini" type="text" @click="payCheck(scope.row)">审核</el-button>
                            <el-button v-if="scope.row.showStatusState=='order-7'" size="mini" type="text" @click="allocationMoney(scope.row)">分配佣金</el-button>

                            <!-- <el-button size="mini" type="text" @click="viewDetail(scope.row)" v-hasPermi="['vanger:order:query']">查看详情</el-button>
                            <el-button size="mini" type="text" @click="assignOrder(scope.row)">订单指派</el-button>
                            <el-button size="mini" type="text" @click="cancelOrder(scope.row)">取消订单</el-button>
                            <el-button size="mini" type="text" @click="checkOrder(scope.row)">抢单审核</el-button>
                            <el-button size="mini" type="text" @click="reassignOrder(scope.row)">重新指派</el-button>
                            <el-button size="mini" type="text" @click="setOut(scope.row)">立即出发</el-button>
                            <el-button size="mini" type="text" @click="reach(scope.row)">确认到达</el-button>
                            <el-button size="mini" type="text" @click="serviceAnalysis(scope.row)">服务分析</el-button>
                            <el-button size="mini" type="text" @click="revokeOrder(scope.row)">撤单放弃</el-button>
                            <el-button size="mini" type="text" @click="adjustAmount(scope.row)">调整金额</el-button>
                            <el-button size="mini" type="text" @click="holdOrder(scope.row)">挂单</el-button>
                            <el-button size="mini" type="text" @click="applyPart(scope.row)">申请配件</el-button>
                            <el-button size="mini" type="text" @click="endService(scope.row)">服务完成</el-button>
                            <el-button size="mini" type="text" @click="continueService(scope.row)">继续服务</el-button>
                            <el-button size="mini" type="text" @click="payCheck(scope.row)">支付审核</el-button>
                            <el-button size="mini" type="text" @click="allocationMoney(scope.row)">分配佣金</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination_view">
                <el-pagination class="pagination" v-if="tableData.length>0" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :current-page="pageNum" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>

    <order-detail class="detail_view" ref="orderDetail" :id="detailId" v-if="showDetail" @close="showDetail=false" @assignOrder="assignOrder(selectRow)" @cancelOrder="cancelOrder(selectRow)" @checkOrder="checkOrder(selectRow)" @reassignOrder="reassignOrder(selectRow)" @setOut="setOut(selectRow)" @reach="reach(selectRow)" @serviceAnalysis="serviceAnalysis(selectRow)" @revokeOrder="revokeOrder(selectRow)" @adjustAmount="adjustAmount(selectRow)" @startServe="startServe(selectRow)" @holdOrder="holdOrder(selectRow)" @applyPart="applyPart(selectRow)" @endService="endService(selectRow)" @continueService="continueService(selectRow)" @payCheck="payCheck(selectRow)" @allocationMoney="allocationMoney(selectRow)"></order-detail>

    <cus-dialog :visible.sync="assignOrderDialog" title="订单指派">
        <div class="assign_order_dialog">
            <div class="page_container_view">
                <div class="page_header_view">
                    <div class="page_header_left">
                        <div class="page_header_left_item">
                            <span class="prefix_text">区域:</span>
                            <el-cascader v-model="assignOrderArea" placeholder="请输入区域" size="mini" :options="areaOptions" clearable @change="searchAssignData" />
                        </div>
                        <div class="page_header_left_item">
                            <span class="prefix_text">服务类型:</span>
                            <el-select v-model="assignOrderServerType" placeholder="服务类型" clearable size="mini" @change="searchAssignData">
                                <el-option label="全部" value="" />
                                <el-option v-for="item in serverTypes" :value="item.id" :label="item.name" :key="item.id" />
                            </el-select>
                        </div>
                        <div class="page_header_left_item">
                            <span class="prefix_text">产品类型:</span>
                            <el-select v-model="assignOrderProductCategory" placeholder="产品类型" clearable size="mini" @change="searchAssignData">
                                <el-option label="全部" value="" />
                                <el-option v-for="item in productCategoryOptions" :value="item.id" :label="item.name" :key="item.id" />
                            </el-select>
                        </div>
                        <div class="page_header_left_item">
                            <el-button type="primary" icon="el-icon-search" size="small" @click="searchAssignData">搜索</el-button>
                        </div>
                        <div class="page_header_left_item">
                            <el-button icon="el-icon-refresh" size="small" @click="resetAssignQuery">重置</el-button>
                        </div>
                    </div>
                </div>

                <div class="page_content_view">
                    <div class="table_cotainer">
                        <el-table v-if="tableData_assign.length>0" ref="table_view" class="table_view" border stripe :data="tableData_assign" :max-height="tableHeight_assign" :style="{border: '1px solid '+global.tableBorderColor}" :header-cell-style="{
                            background: global.tableHeaderBackground,
                            borderColor: global.tableBorderColor,
                            padding: global.tablePadding,
                            height: global.tableHeaderHeight,
                            color: global.textColor,
                            fontSize:global.fontSize,
                            }" :cell-style="{
                            borderColor: global.tableBorderColor,
                            padding: global.tablePadding,
                            height: global.tableCellHeight,
                            color: global.textColor,
                            fontSize:global.fontSize,
                            }">
                            <el-table-column :fixed="true" type="index" label="序号" width="60" align="center" :index="tableIndex_assign" v-if="tableHeader_assign.length>0"></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip :label="item.label" :prop="item.prop" :min-width="item.minWidth" v-for="item in tableHeader_assign" :key="item.prop">
                                <template slot-scope="scope">
                                    <span class="status_bg" v-if="item.prop=='showStatusName'" :style="{backgroundColor: item.color}">
                                        {{scope.row[item.prop].name}}
                                    </span>
                                    <span>{{helper.showValue(scope.row[item.prop])}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="200" align="center" v-if="tableHeader_assign.length>0">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="text" @click="assignOrderClick(scope.row)">派单</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="pagination_view">
                        <el-pagination class="pagination" v-if="tableData_assign.length>0" @size-change="handleSizeChange_assign" @current-change="handleCurrentChange_assign" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize_assign" :current-page="pageNum_assign" layout="total, sizes, prev, pager, next, jumper" :total="total_assign">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </cus-dialog>

    <cus-dialog :visible.sync="checkOrderDialog" title="抢单审核">
        <div class="check_order_dialog">
            <el-table v-if="tableData_engineer.length>0" ref="table_view" class="table_view" border stripe :data="tableData_engineer" max-height="150" :style="{border: '1px solid '+global.tableBorderColor}" :header-cell-style="{
                            background: global.tableHeaderBackground,
                            borderColor: global.tableBorderColor,
                            padding: global.tablePadding,
                            height: global.tableHeaderHeight,
                            color: global.textColor,
                            fontSize:global.fontSize,
                            }" :cell-style="{
                            borderColor: global.tableBorderColor,
                            padding: global.tablePadding,
                            height: global.tableCellHeight,
                            color: global.textColor,
                            fontSize:global.fontSize,
                            }">
                <el-table-column align="center" show-overflow-tooltip :label="item.label" :prop="item.prop" :min-width="item.minWidth" v-for="item in tableHeader_engineer" :key="item.prop">
                    <template slot-scope="scope">
                        <span class="status_bg" v-if="item.prop=='avatar'">
                            <image-preview :src="scope.row[item.prop]" :width="50" :height="50" />
                        </span>
                        <span v-else>{{helper.showValue(scope.row[item.prop])}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-form :model="checkOrderForm" :rules="checkOrderRules" ref="checkOrderForm" label-width="80px">
                <el-form-item label="审核结果" prop="type">
                    <el-radio-group v-model="checkOrderForm.type">
                        <el-radio :label="'1'">通过</el-radio>
                        <el-radio :label="'0'">不通过</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div class="adjust_amount_buttons">
                <el-button size="default" @click="checkOrderDialog=false">取消</el-button>
                <el-button type="primary" size="default" @click="uploadCheckOrder">确认</el-button>
            </div>
        </div>
    </cus-dialog>

    <cus-dialog :visible.sync="serviceAnalysisDialog" title="服务分析">
        <div class="service_analysis_dialog">
            <el-form :model="serviceAnalysisForm" :rules="serviceAnalysisRules" ref="serviceAnalysisForm" label-width="170px">
                <el-form-item label="诊断内容" prop="problemDescribe">
                    <el-input type="textarea" :autosize="{minRows: 3, maxRows: 6}" v-model="serviceAnalysisForm.problemDescribe"></el-input>
                </el-form-item>
                <!-- <el-form-item label="上传图片/视频" prop="attach">
                    <image-upload v-model="serviceAnalysisForm.attach" />
                </el-form-item> -->
                <el-form-item label="上传图片/视频" prop="attach">
                    <file-upload v-model="serviceAnalysisForm.attach" :fileSize="100" :limit="9" :fileType="['png', 'jpg', 'jpeg', 'gif','mp4']" />
                </el-form-item>
            </el-form>
            <div class="adjust_amount_buttons">
                <el-button size="default" @click="serviceAnalysisDialog=false">取消</el-button>
                <el-button type="primary" size="default" @click="uploadServiceAnalysis">确认</el-button>
            </div>
        </div>
    </cus-dialog>

    <cus-dialog :visible.sync="adjustAmountDialog" title="调整金额">
        <div class="adjust_amount_dialog">
            <el-form :model="adjustAmountForm" :rules="adjustAmountRules" ref="adjustAmountForm" label-width="140px">
                <el-form-item label="维修费用" prop="amount">
                    <el-input v-model="adjustAmountForm.amount">
                        <template slot="append">元/次</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="维修工时" prop="workHour">
                    <el-input v-model="adjustAmountForm.workHour">
                        <template slot="append">小时</template>
                    </el-input>
                </el-form-item>
            </el-form>
            <div class="adjust_amount_buttons">
                <el-button size="default" @click="adjustAmountDialog=false">取消</el-button>
                <el-button type="primary" size="default" @click="uploadAdjustAmount">确认</el-button>

            </div>
        </div>
    </cus-dialog>

    <cus-dialog :visible.sync="holdOrderDialog" title="挂单">
        <div class="hold_order_dialog">
            <el-form :model="holdOrderForm" :rules="holdOrderRules" ref="holdOrderForm" label-position="top">
                <el-form-item label="请选择挂单原因" prop="reason">
                    <el-radio-group v-model="holdOrderForm.reason">
                        <el-row>
                            <el-col :span="24" v-for="item in holdOrderOptions" :key="item.label" style="margin-top:15px">
                                <el-radio :label="item.label">{{item.label}}</el-radio>
                            </el-col>
                        </el-row>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div class="adjust_amount_buttons">
                <el-button size="default" @click="holdOrderDialog=false">取消</el-button>
                <el-button type="primary" size="default" @click="uploadHoldOrder">确认</el-button>
            </div>
        </div>
    </cus-dialog>

    <cus-dialog :visible.sync="endServiceDialog" title="服务完成">
        <div class="end_service_dialog">
            <el-form :model="endServiceForm" :rules="endServiceRules" ref="endServiceForm" label-width="170px">
                <el-form-item label="服务结果" prop="problemDescribe">
                    <el-input type="textarea" :autosize="{minRows: 3, maxRows: 6}" v-model="endServiceForm.problemDescribe"></el-input>
                </el-form-item>
                <!-- <el-form-item label="上传图片/视频" prop="attach">
                    <image-upload v-model="endServiceForm.attach" />
                </el-form-item> -->
                <el-form-item label="上传图片/视频" prop="attach">
                    <file-upload v-model="endServiceForm.attach" :fileSize="100" :limit="9" :fileType="['png', 'jpg', 'jpeg', 'gif','mp4']" />
                </el-form-item>
            </el-form>
            <div class="adjust_amount_buttons">
                <el-button size="default" @click="endServiceDialog=false">取消</el-button>
                <el-button type="primary" size="default" @click="uploadEndService">确认</el-button>
            </div>
        </div>
    </cus-dialog>

    <cus-dialog :visible.sync="payCheckDialog" title="支付审核">
        <div class="pay_check_dialog" v-if="detailData.payment">
            <el-form :model="payCheckForm" :rules="payCheckRules" ref="payCheckForm" label-width="100px">
                <template v-for="item in detailData.payment.payments">
                    <el-form-item label="上门费" v-if="item.payItem == '1' && item.payMode == '2'" :key="item.id">
                        <el-input v-model="item.paidAmount" disabled>
                            <template slot="append">元/次</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="支付凭证" v-if="item.payItem == '1' && item.payMode == '2' && item.payVoucher" :key="item.id+'_payVoucher'">
                        <template v-for="(image,index) in item.payVoucher.split(',')">
                            <div v-if="image.indexOf('mp4') !== -1" :key="index" style="margin-right:10px;">
                                <video width="220" height="200" controls>
                                    <source :src="image" type="video/mp4">
                                </video>
                            </div>
                            <el-image v-else style="width: 100px; height: 100px" :src="image" :preview-src-list="[image]" :key="index">
                            </el-image>
                        </template>
                    </el-form-item>
                    <el-form-item label="维修费" v-if="item.payItem == '2' && item.payMode == '2'" :key="item.id">
                        <el-input v-model="item.paidAmount" disabled>
                            <template slot="append">元/次</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="支付凭证" v-if="item.payItem == '2' && item.payMode == '2' && item.payVoucher" :key="item.id+'_payVoucher'">
                        <template v-for="(image,index) in item.payVoucher.split(',')">
                            <div v-if="image.indexOf('mp4') !== -1" :key="index" style="margin-right:10px;">
                                <video width="220" height="200" controls>
                                    <source :src="image" type="video/mp4">
                                </video>
                            </div>
                            <el-image v-else style="width: 100px; height: 100px" :src="image" :preview-src-list="[image]" :key="index">
                            </el-image>
                        </template>
                    </el-form-item>
                    <el-form-item label="配件费" v-if="item.payItem == '3' && item.payMode == '2'" :key="item.id">
                        <el-input v-model="item.paidAmount" disabled>
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="支付凭证" v-if="item.payItem == '3' && item.payMode == '2' && item.payVoucher" :key="item.id+'_payVoucher'">
                        <template v-for="(image,index) in item.payVoucher.split(',')">
                            <div v-if="image.indexOf('mp4') !== -1" :key="index" style="margin-right:10px;">
                                <video width="220" height="200" controls>
                                    <source :src="image" type="video/mp4">
                                </video>
                            </div>
                            <el-image v-else style="width: 100px; height: 100px" :src="image" :preview-src-list="[image]" :key="index">
                            </el-image>
                        </template>
                    </el-form-item>

                </template>
                <el-form-item label="审核结果" prop="type">
                    <el-radio-group v-model="payCheckForm.type">
                        <el-radio :label="'1'">通过</el-radio>
                        <el-radio :label="'0'">不通过</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="审核原因" prop="reason" v-if="payCheckForm.type=='0'">
                    <el-input type="textarea" :autosize="{minRows: 3, maxRows: 6}" v-model="payCheckForm.reason"></el-input>
                </el-form-item>
            </el-form>
            <div class="adjust_amount_buttons">
                <el-button size="default" @click="payCheckDialog=false">取消</el-button>
                <el-button type="primary" size="default" @click="uploadPayCheck">确认</el-button>
            </div>
        </div>
    </cus-dialog>

    <cus-dialog :visible.sync="allocationMoneyDialog" title="分配佣金">
        <div class="allocation_money_dialog">
            <el-form :model="allocationMoneyForm" :rules="allocationMoneyRules" ref="allocationMoneyForm" label-width="100px">
                <el-form-item label="订单编号">
                    <el-input v-model="detailData.orderNo" disabled></el-input>
                </el-form-item>
                <el-form-item label="师傅ID" v-if="detailData.engineerUser">
                    <el-input v-model="detailData.engineerUser.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="师傅姓名" v-if="detailData.engineerUser">
                    <el-input v-model="detailData.engineerUser.realName" disabled></el-input>
                </el-form-item>
                <el-form-item label="维修佣金" prop="commission">
                    <el-input v-model="allocationMoneyForm.commission">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
            </el-form>
            <div class="adjust_amount_buttons">
                <el-button size="default" @click="allocationMoneyDialog=false">取消</el-button>
                <el-button type="primary" size="default" @click="uploadAllocationMoney">确认</el-button>
            </div>
        </div>
    </cus-dialog>

    <cus-dialog :visible.sync="applyPartDialog" title="申请配件">
        <div class="apply_part_dialog">
            <div class="options_view">
                <el-button type="primary" size="mini" @click="selectFromStore">从配件库中选择</el-button>
                <div>
                    <el-button type="text" size="default" icon="el-icon-remove" style="font-size:28px" :disabled="selectedPartItem.length==0" @click="removePart"></el-button>
                    <el-button type="text" size="default" icon="el-icon-circle-plus" style="font-size:28px" @click="addNewPart"></el-button>
                </div>

            </div>
            <el-table ref="multipleTable" class="table_view" border stripe :data="tableData_part" max-height="600" :style="{border: '1px solid '+global.tableBorderColor}" :header-cell-style="{
                            background: global.tableHeaderBackground,
                            borderColor: global.tableBorderColor,
                            padding: global.tablePadding,
                            height: global.tableHeaderHeight,
                            color: global.textColor,
                            fontSize:global.fontSize,
                            }" :cell-style="{
                            borderColor: global.tableBorderColor,
                            padding: global.tablePadding,
                            height: global.tableCellHeight,
                            color: global.textColor,
                            fontSize:global.fontSize,
                            }" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column align="center" show-overflow-tooltip :label="item.label" :prop="item.prop" :min-width="item.minWidth" v-for="item in tableHeader_part" :key="item.prop">
                    <template slot-scope="scope">
                        <div v-if="item.prop=='name'">
                            <span v-if="scope.row.partId">{{helper.showValue(scope.row[item.prop])}}</span>
                            <el-input v-else v-model="scope.row[item.prop]" placeholder="请输入配件名称" size="mini" clearable></el-input>
                        </div>
                        <div v-else-if="item.prop=='modelNo'">
                            <span v-if="scope.row.partId">{{helper.showValue(scope.row[item.prop])}}</span>
                            <el-input v-else v-model="scope.row[item.prop]" placeholder="请输入配件型号" size="mini" clearable></el-input>
                        </div>
                        <div v-else-if="item.prop=='price'">
                            <span v-if="scope.row.partId">{{helper.showValue(scope.row[item.prop])}}</span>
                            <el-input v-else v-model="scope.row[item.prop]" placeholder="请输入单价" size="mini" clearable></el-input>
                        </div>
                        <div v-else-if="item.prop=='qty'">
                            <span v-if="scope.row.partId">{{helper.showValue(scope.row[item.prop])}}</span>
                            <el-input-number v-else v-model="scope.row[item.prop]" size="mini"></el-input-number>
                        </div>
                        <span v-else>{{helper.showValue(scope.row[item.prop])}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="adjust_amount_buttons">
                <el-button size="default" @click="applyPartDialog=false">取消</el-button>
                <el-button type="primary" size="default" @click="uploadApplyPartDialog" :disabled="tableData_part.length==0">确认</el-button>
            </div>
        </div>
    </cus-dialog>

    <cus-dialog :visible.sync="partStoreDialog" title="选择配件">
        <div class="part_store_dialog">
            <div class="page_container_view">
                <div class="page_header_view">
                    <div class="page_header_left">
                        <div class="page_header_left_item">
                            <span class="prefix_text">配件类型:</span>
                            <el-select v-model="partTypeId" placeholder="产品类型" clearable size="mini" @change="selectFromStore">
                                <el-option label="全部" value="" />
                                <el-option v-for="item in partOptions" :value="item.id" :label="item.name" :key="item.id" />
                            </el-select>
                        </div>
                        <div class="page_header_left_item">
                            <span class="prefix_text">名称:</span>
                            <el-input v-model="name" placeholder="请输入配件名称" size="mini" clearable @input="selectFromStore"></el-input>
                        </div>
                        <div class="page_header_left_item">
                            <span class="prefix_text">型号:</span>
                            <el-input v-model="modelNo" placeholder="请输入配件型号" size="mini" clearable @input="selectFromStore"></el-input>
                        </div>
                        <div class="page_header_left_item">
                            <el-button type="primary" icon="el-icon-search" size="small" @click="selectFromStore">搜索</el-button>
                        </div>
                        <div class="page_header_left_item">
                            <el-button icon="el-icon-refresh" size="small" @click="resetPartStoreQuery">重置</el-button>
                        </div>
                    </div>
                </div>

                <div class="page_content_view">
                    <div class="table_cotainer">
                        <el-table v-if="tableData_store.length>0" ref="table_view" class="table_view" border stripe :data="tableData_store" max-height="500" :style="{border: '1px solid '+global.tableBorderColor}" :header-cell-style="{
                            background: global.tableHeaderBackground,
                            borderColor: global.tableBorderColor,
                            padding: global.tablePadding,
                            height: global.tableHeaderHeight,
                            color: global.textColor,
                            fontSize:global.fontSize,
                            }" :cell-style="{
                            borderColor: global.tableBorderColor,
                            padding: global.tablePadding,
                            height: global.tableCellHeight,
                            color: global.textColor,
                            fontSize:global.fontSize,
                            }">
                            <el-table-column :fixed="true" type="index" label="序号" width="60" align="center" v-if="tableHeader_store.length>0"></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip :label="item.label" :prop="item.prop" :min-width="item.minWidth" v-for="item in tableHeader_store" :key="item.prop">
                                <template slot-scope="scope">
                                    <div v-if="item.prop=='qty'">
                                        <el-input-number v-model="scope.row[item.prop]" size="mini"></el-input-number>
                                    </div>
                                    <span v-else>{{helper.showValue(scope.row[item.prop])}}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <div class="adjust_amount_buttons">
                <el-button size="default" @click="partStoreDialog=false">取消</el-button>
                <el-button type="primary" size="default" @click="selectedPartFromStore">确认</el-button>
            </div>
        </div>
    </cus-dialog>

</div>
</template>

<script>
import {
    getServerTypes,
    getProductCategorys,
    getAreas,
    getAreaOptions,
    getPartTypes,
    getParts,
} from "@/api/vanger/skcommon";
import {
    orderListRequest,
    getOrderDetail,
    getOrderShowStatus,
    checkOrderRequest,
    assignOrderRequest,
    cancelOrderRequest,
    setOutRequest,
    reachRequest,
    revokeOrderRequest,
    serviceAnalysisRequest,
    adjustAmountRequest,
    holdOrderRequest,
    continueServiceRequest,
    endServiceRequest,
    allocationMoneyRequest,
    payCheckRequest,
    applyPartRequest,
    startServeRequest,
} from "@/api/vanger/order";

import { listPart } from "@/api/vanger/part";
import {
    listEngineerUser
} from "@/api/vanger/engineerUser";

import OrderDetail from "@/views/vanger/order/orderDetail";
import SelectAll from "@/views/vanger/cusComponent/selectAll";
export default {
    components: {
        OrderDetail,
        SelectAll,
    },
    data() {
        return {
            loading: false,

            orderNo: "",
            serverTypeId: "",
            contactMobile: "",
            isOverdue: "",
            serverState: "",

            type: "0",
            time: [],

            pageNum: 1,
            pageSize: 20,
            tableHeader: [], //表头数据
            tableData: [], //表数据
            tableHeight: "",
            total: 0,

            detailData: "",

            serverTypes: [],
            isOverdueOptions: [{
                    label: "全部",
                    value: ""
                },
                {
                    label: "正常",
                    value: "1"
                },
                {
                    label: "即将超时",
                    value: "2"
                },
                {
                    label: "已超时",
                    value: "3"
                },
            ],
            orderStatus: [],
            orderStatusOptions: [],

            tabOptions: [{
                    label: "全部",
                    name: "0"
                },
                {
                    label: "待支付",
                    name: "1"
                },
                {
                    label: "待派单",
                    name: "2"
                },
                {
                    label: "待接单",
                    name: "3"
                },
                {
                    label: "已派单",
                    name: "4"
                },
                {
                    label: "待上门",
                    name: "5"
                },
                {
                    label: "服务中",
                    name: "6"
                },
                {
                    label: "待审核",
                    name: "7"
                },
                {
                    label: "待评价",
                    name: "8"
                },
                {
                    label: "已完成",
                    name: "9"
                },
                {
                    label: "已取消",
                    name: "10"
                },
            ],
            showDetail: false,
            detailId: "",

            selectRow: "", //操作行

            //订单指派
            assignOrderDialog: false,
            assignOrderArea: "",
            assignOrderServerType: "",
            assignOrderProductCategory: "",
            productCategoryOptions: [],
            areaOptions: [],
            pageNum_assign: 1,
            pageSize_assign: 10,
            tableHeader_assign: [], //表头数据
            tableData_assign: [], //表数据
            tableHeight_assign: "",
            total_assign: 0,

            //服务分析
            serviceAnalysisDialog: false,
            serviceAnalysisForm: {
                problemDescribe: "",
                attach: "",
            },
            serviceAnalysisRules: {
                problemDescribe: [{
                    required: true,
                    message: '请填写诊断内容',
                    trigger: 'blur'
                }, ],
                attach: [{
                    required: true,
                    message: '请上传图片/视频',
                    trigger: 'blur'
                }, ],
            },

            //抢单审核
            checkOrderDialog: false,
            checkOrderForm: {
                type: "1",
            },
            checkOrderRules: {
                type: [{
                    required: true,
                    message: '请选择审核结果',
                    trigger: 'blur'
                }, ],
            },
            tableHeader_engineer: [], //表头数据
            tableData_engineer: [], //表数据

            //调整金额
            adjustAmountDialog: false,
            adjustAmountForm: {
                amount: "",
                workHour: "",
            },
            adjustAmountRules: {
                amount: [{
                    required: true,
                    message: '请输入维修金额',
                    trigger: 'blur'
                }, ],
                workHour: [{
                    required: true,
                    message: '请输入维修工时',
                    trigger: 'blur'
                }, ],
            },

            //挂单
            holdOrderDialog: false,
            holdOrderForm: {
                reason: "",
            },
            holdOrderRules: {
                reason: [{
                    required: true,
                    message: '请选择挂单原因',
                    trigger: 'blur'
                }, ],
            },
            holdOrderOptions: [{
                    label: "缺少配件"
                },
                {
                    label: "工具不齐全"
                },
                {
                    label: "联系不上客户"
                },
                {
                    label: "临时有事"
                },
                {
                    label: "其他原因"
                },
            ],

            //服务完成
            endServiceDialog: false,
            endServiceForm: {
                problemDescribe: "",
                attach: "",
            },
            endServiceRules: {
                problemDescribe: [{
                    required: true,
                    message: '请填写服务结果',
                    trigger: 'blur'
                }, ],
                attach: [{
                    required: true,
                    message: '请上传图片/视频',
                    trigger: 'blur'
                }, ],
            },

            //分配佣金
            allocationMoneyDialog: false,
            allocationMoneyForm: {
                commission: "",
            },
            allocationMoneyRules: {
                commission: [{
                    required: true,
                    message: '请输入金额',
                    trigger: 'blur'
                }, ],
            },

            //支付审核
            payCheckDialog: false,
            payCheckForm: {
                type: "1",
                reason: "",
            },
            payCheckRules: {
                type: [{
                    required: true,
                    message: '请选择审核结果',
                    trigger: 'blur'
                }, ],
                reason: [{
                    required: true,
                    message: '请填写审核原因',
                    trigger: 'blur'
                }, ],
            },

            //审批配件
            applyPartDialog: false,
            tableHeader_part: [], //表头数据
            tableData_part: [], //表数据

            //配件库
            partStoreDialog: false,
            selectedPartItem: [],
            partTypeId: "",
            name: "",
            modelNo: "",
            partOptions: [],
            tableHeader_store: [], //表头数据
            tableData_store: [], //表数据

        }
    },
    mounted() {
        this.jq(window).resize(() => {
            this.$nextTick(() => {
                this.tableHeight = (this.jq(".table_cotainer")[0]).offsetHeight;
            })
        })
        this.tableHeight = (this.jq(".table_cotainer")[0]).offsetHeight - 40;
        this.getServerTypeList();
        this.getOrderStatusList();
        this.getAreaOptionList();
        this.getPartTypesList();
        this.getProductCategorysList();

        this.searchData();
    },
    methods: {
        //查看详情
        viewDetail(item) {
            console.log(item);
            this.detailId = item.id + "";
            this.selectRow = item;
            this.showDetail = true;

        },
        //订单指派
        assignOrder(item) {
            console.log(item);
            this.selectRow = item;
            this.assignOrderDialog = true;
            this.$nextTick(() => {
                this.tableHeight_assign = (this.jq(".table_cotainer")[1]).offsetHeight;
            })
            this.searchAssignData();
        },
        assignOrderClick(item) {
            console.log(item);
            let params = {
                engineerId: item.id,
                orderId: this.selectRow.id,
            }
            console.log(params);
            assignOrderRequest(params).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.$message.success("订单指派成功");
                    this.assignOrderDialog = false;
                    this.loadData();
                } else {
                    this.$message.error("订单指派失败");
                }
            });
        },
        //取消订单
        cancelOrder(item) {
            console.log(item);
            this.selectRow = item;
            this.$confirm('确定要取消该派单吗?', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = {
                    orderId: this.selectRow.id,
                }
                console.log(params);
                cancelOrderRequest(params).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message.success("取消订单成功");
                        this.loadData();
                    } else {
                        this.$message.error("取消订单失败");
                    }
                });
            }).catch(() => {

            });
        },
        //抢单审核
        checkOrder(item) {
            console.log(item);
            this.selectRow = item;
            let params = {
                id: item.id
            }
            getOrderDetail(params).then(res => {
                console.log(res);
                this.detailData = res.data;
                this.tableHeader_engineer = [{
                        label: "师傅ID",
                        prop: "id"
                    },
                    {
                        label: "真实姓名",
                        prop: "realName"
                    },
                    {
                        label: "头像",
                        prop: "avatar"
                    },
                    {
                        label: "手机号",
                        prop: "mobile"
                    },
                    // {label:"服务区域",prop:""},
                    // {label:"服务类型",prop:""},
                    // {label:"产品类型",prop:""},
                    // {label:"服务订单",prop:""},
                    // {label:"准时上门率",prop:""},
                    // {label:"完成率",prop:""},
                    // {label:"服务评分",prop:""},
                ];
                this.tableData_engineer = [this.detailData.engineerUser];
                this.checkOrderDialog = true;
            })
        },
        uploadCheckOrder() {
            this.$refs["checkOrderForm"].validate((valid) => {
                if (valid) {
                    let params = {
                        type: this.checkOrderForm.type,
                        orderId: this.selectRow.id,
                    }
                    console.log(params);
                    checkOrderRequest(params).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            this.$message.success("操作成功");
                            this.checkOrderDialog = false;
                            this.loadData();
                        } else {
                            this.$message.error("操作失败");
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //重新指派
        reassignOrder(item) {
            console.log(item);
            this.assignOrder(item);
        },
        //立即出发
        setOut(item) {
            console.log(item);
            this.selectRow = item;
            this.$confirm('确认开始对该订单进行服务吗?', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = {
                    orderId: this.selectRow.id,
                }
                console.log(params);
                setOutRequest(params).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message.success("操作成功");
                        this.loadData();
                    } else {
                        this.$message.error("操作失败");
                    }
                });
            }).catch(() => {

            });
        },
        //确认到达
        reach(item) {
            console.log(item);
            this.selectRow = item;
            this.$confirm('确认师傅已经到达服务地址吗?', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = {
                    orderId: this.selectRow.id,
                }
                console.log(params);
                reachRequest(params).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message.success("操作成功");
                        this.loadData();
                    } else {
                        this.$message.error("操作失败");
                    }
                });
            }).catch(() => {

            });
        },
        //服务分析
        serviceAnalysis(item) {
            console.log(item);
            this.selectRow = item;
            this.serviceAnalysisForm = {
                problemDescribe: "",
                attach: "",
            }
            this.serviceAnalysisDialog = true;
        },
        //提交服务分析内容
        uploadServiceAnalysis() {
            this.$refs["serviceAnalysisForm"].validate((valid) => {
                if (valid) {
                    let params = {
                        attach: this.serviceAnalysisForm.attach,
                        problemDescribe: this.serviceAnalysisForm.problemDescribe,
                        orderId: this.selectRow.id,
                    }
                    console.log(params);
                    serviceAnalysisRequest(params).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            this.$message.success("操作成功");
                            this.serviceAnalysisDialog = false;
                            this.loadData();
                        } else {
                            this.$message.error("操作失败");
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        //撤单放弃
        revokeOrder(item) {
            console.log(item);
            this.selectRow = item;
            this.$confirm('确认撤销该订单吗?', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = {
                    orderId: this.selectRow.id,
                }
                console.log(params);
                revokeOrderRequest(params).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message.success("操作成功");
                        this.loadData();
                    } else {
                        this.$message.error("操作失败");
                    }
                });
            }).catch(() => {

            });
        },
        //调整金额
        adjustAmount(item) {
            console.log(item);
            this.selectRow = item;
            this.adjustAmountForm = {
                amount: "",
                workHour: "",
            }
            this.adjustAmountDialog = true;
        },
        uploadAdjustAmount() {
            this.$refs["adjustAmountForm"].validate((valid) => {
                if (valid) {
                    let params = {
                        amount: this.adjustAmountForm.amount,
                        workHour: this.adjustAmountForm.workHour,
                        orderId: this.selectRow.id,
                    }
                    console.log(params);
                    adjustAmountRequest(params).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            this.$message.success("操作成功");
                            this.adjustAmountDialog = false;
                            this.loadData();
                        } else {
                            this.$message.error("操作失败");
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        //开始服务
        startServe(item) {
            console.log(item);
            this.selectRow = item;
            this.$confirm('确认开始服务吗?', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = {
                    orderId: this.selectRow.id,
                }
                console.log(params);
                startServeRequest(params).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message.success("操作成功");
                        this.loadData();
                    } else {
                        this.$message.error("操作失败");
                    }
                });
            }).catch(() => {

            });
        },
        //挂单
        holdOrder(item) {
            console.log(item);
            this.selectRow = item;
            this.holdOrderForm = {
                reason: "",
            }
            this.holdOrderDialog = true;
        },
        uploadHoldOrder() {
            this.$refs["holdOrderForm"].validate((valid) => {
                if (valid) {
                    let params = {
                        reason: this.holdOrderForm.reason,
                        orderId: this.selectRow.id,
                    }
                    console.log(params);
                    holdOrderRequest(params).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            this.$message.success("操作成功");
                            this.holdOrderDialog = false;
                            this.loadData();
                        } else {
                            this.$message.error("操作失败");
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        //申请配件
        applyPart(item) {
            console.log(item);
            this.selectRow = item;
            this.applyPartDialog = true;
            this.tableHeader_part = [
                { label: "配件名称", prop: "name" },
                { label: "配件型号", prop: "modelNo" },
                { label: "价格(元/个)", prop: "price" },
                { label: "所需数量", prop: "qty" },
            ];
            this.tableData_part = [];
            // this.tableData_part = [
            //     { name: "", modelNo: "", price: "", qty: "", partId: "", partTypeId: "" },
            // ];

        },
        //从配件库中选择
        selectFromStore() {
            let params = {
                partTypeId: this.partTypeId,
                name: this.name,
                modelNo: this.modelNo,
                pageNum: 1,
                pageSize: 10000,
            }
            console.log(params);
            listPart(params).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.tableHeader_store = [
                        { label: "配件编号", prop: "id" },
                        { label: "配件类型", prop: "partTypeName" },
                        { label: "配件名称", prop: "name" },
                        { label: "配件型号", prop: "modelNo" },
                        { label: "库存数量", prop: "storeQty" },
                        { label: "所需数量", prop: "qty" },
                    ];
                    this.tableData_store = res.rows;
                    for (let index = 0; index < this.tableData_store.length; index++) {
                        const element = this.tableData_store[index];
                        for (let x = 0; x < this.tableData_part.length; x++) {
                            const cell = this.tableData_part[x];
                            if (cell.partId == element.id) {
                                element.qty = cell.qty;
                                break;
                            }
                        }
                    }
                    this.partStoreDialog = true;
                } else {

                }
            });
        },
        //配件库选择后确认
        selectedPartFromStore() {
            //获取到有数量的行
            let result = [];
            for (let index = 0; index < this.tableData_store.length; index++) {
                const element = this.tableData_store[index];
                //添加到配件列表中
                let flag = false;
                for (let x = 0; x < this.tableData_part.length; x++) {
                    const cell = this.tableData_part[x];
                    if (cell.partId == element.id) { //同型号的数量相加
                        flag = true;
                        cell.qty = element.qty;
                        if (cell.qty == 0 || this.helper.isEmpty(cell.qty)) {
                            this.tableData_part.splice(x, 1);
                        }
                        break;
                    }
                }
                if (flag) {
                    continue;
                } else {
                    if (element.qty && element.qty > 0) {
                        let dict = {
                            value: this.helper.getID(),
                            name: element.name,
                            modelNo: element.modelNo,
                            price: "",
                            qty: element.qty,
                            partId: element.id,
                            partTypeId: element.partTypeId,
                        }
                        result.push(dict);
                    }
                }

            }
            this.tableData_part = [...this.tableData_part, ...result];
            console.log(this.tableData_part);
            this.partStoreDialog = false;
        },
        uploadApplyPartDialog() {
            let result = [];
            //获取有效值
            for (let index = 0; index < this.tableData_part.length; index++) {
                const element = this.tableData_part[index];
                delete element.value;
                if (element.partId) { //配件库中获取的值
                    result.push(element);
                } else { //自定义的配件
                    if (element.name && element.modelNo && element.price && element.qty && element.qty > 0) {
                        if (!this.validateNumber(element.price)) {
                            this.$message.warning("单价格式错误");
                            return;
                        }

                        if (!this.validateNumber(element.qty)) {
                            this.$message.warning("数量格式错误");
                            return;
                        }
                        result.push(element);
                        console.log(element);
                    } else {
                        console.log(element);
                        if (element.qty == 0) {
                            this.$message.warning("数量不能为0");
                            return;
                        }
                        this.$message.warning("请填写完整的配件信息");
                    }
                }
            }
            console.log(result);
            let params = {
                lines: result,
                orderId: this.selectRow.id,
            }
            console.log(params);
            applyPartRequest(params).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.$message.success("操作成功");
                    this.applyPartDialog = false;
                    this.loadData();
                } else {
                    this.$message.error("操作失败");
                }
            });
        },
        resetPartStoreQuery() {
            this.partTypeId = "";
            this.name = "";
            this.modelNo = "";
            this.selectFromStore();
        },

        // 在Vue组件中的方法中使用正则表达式验证
        validateNumber(value) {
            const regex = /^[0-9]+(\.[0-9]*)?$/;
            return regex.test(value);
        },

        //添加自定义配件
        addNewPart() {
            let newPart = {
                value: this.helper.getID(),
                name: "",
                modelNo: "",
                price: "",
                qty: 0,
                partId: "",
                partTypeId: ""
            }
            this.tableData_part.push(newPart);
        },
        //删除选中框的内容
        removePart() {
            for (let index = 0; index < this.selectedPartItem.length; index++) {
                const element = this.selectedPartItem[index];
                for (let x = 0; x < this.tableData_part.length; x++) {
                    const cell = this.tableData_part[x];
                    if (cell.value == element.value) {
                        this.tableData_part.splice(x, 1);
                    }
                }
            }
        },
        //获取选中项
        handleSelectionChange(e) {
            console.log(e);
            this.selectedPartItem = e;
        },
        //服务完成
        endService(item) {
            console.log(item);
            this.selectRow = item;
            this.endServiceForm = {
                problemDescribe: "",
                attach: "",
            }
            this.endServiceDialog = true;
        },
        uploadEndService() {
            this.$refs["endServiceForm"].validate((valid) => {
                if (valid) {
                    let params = {
                        attach: this.endServiceForm.attach,
                        problemDescribe: this.endServiceForm.problemDescribe,
                        orderId: this.selectRow.id,
                    }
                    console.log(params);
                    endServiceRequest(params).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            this.$message.success("操作成功");
                            this.endServiceDialog = false;
                            this.loadData();
                        } else {
                            this.$message.error("操作失败");
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //继续服务
        continueService(item) {
            console.log(item);
            this.selectRow = item;
            this.$confirm('确认继续服务吗?', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = {
                    orderId: this.selectRow.id,
                }
                console.log(params);
                continueServiceRequest(params).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message.success("操作成功");
                        this.loadData();
                    } else {
                        this.$message.error("操作失败");
                    }
                });
            }).catch(() => {

            });
        },
        //支付审核
        payCheck(item) {
            console.log(item);
            this.selectRow = item;
            let params = {
                id: item.id
            }
            getOrderDetail(params).then(res => {
                console.log(res);
                this.detailData = res.data;
                this.payCheckDialog = true;
            })
        },
        uploadPayCheck() {
            this.$refs["payCheckForm"].validate((valid) => {
                if (valid) {
                    let params = {
                        type: this.payCheckForm.type,
                        reason: this.payCheckForm.reason,
                        orderId: this.selectRow.id,
                    }
                    console.log(params);
                    payCheckRequest(params).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            this.$message.success("操作成功");
                            this.payCheckDialog = false;
                            this.loadData();
                        } else {
                            this.$message.error("操作失败");
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //分配佣金
        allocationMoney(item) {
            console.log(item);
            this.selectRow = item;
            this.allocationMoneyForm = {
                commission: "",
            }
            let params = {
                id: item.id
            }
            getOrderDetail(params).then(res => {
                console.log(res);
                this.detailData = res.data;
                this.allocationMoneyDialog = true;
            })
        },
        uploadAllocationMoney() {
            this.$refs["allocationMoneyForm"].validate((valid) => {
                if (valid) {
                    let params = {
                        commission: this.allocationMoneyForm.commission,
                        orderId: this.selectRow.id,
                    }
                    console.log(params);
                    allocationMoneyRequest(params).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            this.$message.success("操作成功");
                            this.allocationMoneyDialog = false;
                            this.loadData();
                        } else {
                            this.$message.error("操作失败");
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        //获取区域
        getAreaOptionList() {
            getAreaOptions().then(response => {
                console.log(response);
                this.areaOptions = response.data;
            });
        },

        //获取配件类型
        getPartTypesList() {
            getPartTypes().then(response => {
                console.log(response);
                this.partOptions = response.data;
            });
        },

        //获取服务类型
        getServerTypeList() {
            getServerTypes().then(response => {
                console.log(response);
                this.serverTypes = response.data;
            });
        },
        //获取产品类型
        getProductCategorysList() {
            getProductCategorys().then(response => {
                console.log(response);
                this.productCategoryOptions = response.data;
            });
        },
        //获取订单状态
        getOrderStatusList() {
            getOrderShowStatus().then(response => {
                console.log(response);
                this.orderStatusOptions = response.data;
            });
        },
        //搜索列表
        searchData() {
            this.pageNum = 1;
            this.loadData();
        },
        //加载列表数据
        loadData() {
            this.loading = true;
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                orderNo: this.orderNo,
                serverTypeId: this.serverTypeId,
                contactMobile: this.contactMobile,
                isOverdue: this.isOverdue,
                serverState: this.serverState,
                status: this.orderStatus.join(","),
                type: this.type == "0" ? "" : this.type,
                beginTime: this.time.length > 0 ? this.time[0] : "",
                endTime: this.time.length > 0 ? this.time[1] : "",

            }
            console.log(params);
            orderListRequest(params).then(res => {
                console.log(res);
                // this.tableHeader = [
                //     { label: "订单编号", prop: "orderNo", minWidth: "150" },
                //     { label: "客户ID", prop: "customerId", minWidth: "100" },
                //     { label: "客户签约类型", prop: "customerSignedType", minWidth: "120" },
                //     { label: "产品在保状态", prop: "productInServer", minWidth: "120" },
                //     { label: "服务类型ID", prop: "serverTypeId", minWidth: "120" },
                //     { label: "服务类型名称", prop: "serverTypeName", minWidth: "120" },
                //     { label: "问题类型ID", prop: "problemTypeId", minWidth: "120" },
                //     { label: "问题类型名称", prop: "problemTypeName", minWidth: "120" },
                //     { label: "客户姓名", prop: "customeName", minWidth: "120" },
                //     { label: "客户手机号", prop: "customeMobile", minWidth: "120" },
                //     { label: "产品类型ID", prop: "productCategoryId", minWidth: "120" },
                //     { label: "产品类型名称", prop: "productCategoryName", minWidth: "120" },
                //     { label: "客户产品ID", prop: "customerProductId", minWidth: "120" },
                //     { label: "客户产品名称", prop: "customerProductName", minWidth: "180" },
                //     { label: "客户产品型号", prop: "customerProductModeNo",minWidth: "120" },
                //     { label: "客户产品质保期至", prop: "customerProductExpireDate", minWidth: "150" },
                //     { label: "客户门店ID", prop: "customerStoreId", minWidth: "120" },
                //     { label: "客户门店名称", prop: "customerStoreName", minWidth: "180" },
                //     { label: "上门时间", prop: "onsiteDate", minWidth: "120" },
                //     { label: "应付金额", prop: "payableAmount", minWidth: "120" },
                //     { label: "实付金额", prop: "paidAmount", minWidth: "120" },
                //     { label: "付款时间", prop: "payTime", minWidth: "120" },
                //     { label: "客户地址ID", prop: "customeAddressId", minWidth: "120" },
                //     { label: "联系人", prop: "contactName", minWidth: "120" },
                //     { label: "联系方式", prop: "contactMobile", minWidth: "120" },
                //     { label: "省ID", prop: "provinceId", minWidth: "120" },
                //     { label: "省名", prop: "provinceName", minWidth: "120" },
                //     { label: "市ID", prop: "cityId", minWidth: "120" },
                //     { label: "市名", prop: "cityName", minWidth: "120" },
                //     { label: "区ID", prop: "districtId", minWidth: "120" },
                //     { label: "区名", prop: "districtName", minWidth: "120" },
                //     { label: "详细地址", prop: "address", minWidth: "120" },
                //     { label: "纬度", prop: "latitude", minWidth: "120" },
                //     { label: "经度", prop: "longitude", minWidth: "120" },
                //     { label: "指派工程师", prop: "assignEngineerId", minWidth: "120" },
                //     { label: "指派时间", prop: "assignTime", minWidth: "120" },
                //     { label: "客户端显示", prop: "isShowCustomer", minWidth: "120" },
                //     { label: "师傅端显示", prop: "isShowEngineer", minWidth: "120" },
                //     { label: "运营端显示", prop: "isShowOperate", minWidth: "120" },
                //     { label: "服务状态", prop: "serverState", minWidth: "120" },
                //     { label: "订单状态", prop: "status", minWidth: "120" },
                // ];
                this.tableHeader = [{
                        label: "订单编号",
                        prop: "orderNo",
                        minWidth: "150"
                    },
                    {
                        label: "联系人",
                        prop: "contactName",
                        minWidth: "120"
                    },
                    {
                        label: "联系方式",
                        prop: "contactMobile",
                        minWidth: "120"
                    },
                    {
                        label: "服务类型",
                        prop: "serverTypeName",
                        minWidth: "90"
                    },
                    {
                        label: "产品类型",
                        prop: "productCategoryName",
                        minWidth: "100"
                    },
                    {
                        label: "产品名称",
                        prop: "customerProductName",
                        minWidth: "180"
                    },
                    {
                        label: "产品型号",
                        prop: "customerProductModeNo",
                        minWidth: "120"
                    },
                    {
                        label: "所属门店",
                        prop: "customerStoreName",
                        minWidth: "180"
                    },
                    {
                        label: "订单状态",
                        prop: "showStatusName",
                        minWidth: "140"
                    },
                    {
                        label: "创建时间",
                        prop: "createTime",
                        minWidth: "170"
                    },

                ];
                this.tableData = res.data.list;
                // console.log(this.tableData)
                this.total = res.data.total;
                this.loading = false;
                if (this.showDetail) {
                    this.$refs["orderDetail"].loadDetailData();
                }

            });
        },
        //搜索指派师傅列表数据
        searchAssignData() {
            this.pageNum_assign = 1;
            this.loadAssignData();

        },
        loadAssignData() {
            let params = {
                pageNum: this.pageNum_assign,
                pageSize: this.pageSize_assign,
                districtId: this.assignOrderArea,
                serverTypeId: this.assignOrderServerType,
                productCategoryId: this.assignOrderProductCategory,
            }
            console.log(params);
            listEngineerUser(params).then(res => {
                console.log(res);
                this.tableHeader_assign = [{
                        label: "师傅ID",
                        prop: "code",
                        minWidth: "150"
                    },
                    {
                        label: "真实姓名",
                        prop: "realName",
                        minWidth: "120"
                    },
                    {
                        label: "手机号",
                        prop: "mobile",
                        minWidth: "120"
                    },
                    {
                        label: "服务区域",
                        prop: "serverZoneName",
                        minWidth: "180"
                    },
                    {
                        label: "服务类型",
                        prop: "serverTypeName",
                        minWidth: "120"
                    },
                    {
                        label: "产品类型",
                        prop: "productCategoryName",
                        minWidth: "120"
                    },

                ];
                this.tableData_assign = res.rows;
                this.total_assign = res.total;
                this.loading = false;
            });
        },
        //重置指派参数
        resetAssignQuery() {
            this.assignOrderArea = "";
            this.assignOrderServerType = "";
            this.assignOrderProductCategory = "";
            this.searchAssignData();
        },
        //重置查询参数
        resetQuery() {
            this.orderNo = "";
            this.serverTypeId = "";
            this.contactMobile = "";
            this.isOverdue = "";
            this.serverState = "";
            this.orderStatus = [];
            this.time = [];
            this.searchData();
        },

        //序号
        tableIndex(index) {
            return index + 1 + (this.pageNum - 1) * this.pageSize;
        },
        //每页数量变化
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.loadData();
        },
        //翻页
        handleCurrentChange(currentPage) {
            this.pageNum = currentPage;
            this.loadData();
        },

        //序号
        tableIndex_assign(index) {
            return index + 1 + (this.pageNum_assign - 1) * this.pageSize_assign;
        },
        //每页数量变化
        handleSizeChange_assign(pageSize) {
            this.pageSize_assign = pageSize;
            this.loadAssignData();
        },
        //翻页
        handleCurrentChange_assign(currentPage) {
            this.pageNum_assign = currentPage;
            this.loadAssignData();
        },
    },
}
</script>

<style lang="scss" scoped>
.order_list_view {
    width: 100%;
    height: calc(100vh - 85px);
    position: relative;

    .status_bg {
        padding: 4px 7px;
        border-radius: 4px;
        color: #fff;
        background-color: #aaa;
    }

    .assign_order_dialog {
        width: 1200px;
        height: 520px;
    }

    .check_order_dialog {
        width: 1000px;
        padding: 10px 20px;
        box-sizing: border-box;
    }

    .service_analysis_dialog {
        width: 1000px;
        padding: 10px 20px;
        box-sizing: border-box;
    }

    .adjust_amount_dialog {
        width: 500px;
        padding: 10px 20px;
        box-sizing: border-box;
    }

    .hold_order_dialog {
        width: 400px;
        padding: 0px 20px;
        box-sizing: border-box;
    }

    .end_service_dialog {
        width: 1000px;
        padding: 10px 20px;
        box-sizing: border-box;
    }

    .pay_check_dialog {
        width: 600px;
        padding: 0px 20px;
        box-sizing: border-box;
    }

    .allocation_money_dialog {
        width: 450px;
        padding: 10px 20px;
        box-sizing: border-box;
    }

    .apply_part_dialog {
        width: 1000px;
        padding: 0px 20px 10px 20px;
        box-sizing: border-box;

        .options_view {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }

    .part_store_dialog {
        width: 1100px;
        padding: 0px 20px 10px 20px;
        box-sizing: border-box;
    }

    .adjust_amount_buttons {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .detail_view {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        background-color: #fff;
        z-index: 1000;

    }

    ::v-deep.el-tabs__header {
        margin: 0px;
    }
}
</style>
